<template>
  <div class="confirm-body">
    <!-- header -->
    <shop-header>确认订单</shop-header>
    <!-- banner -->
    <!--地址-->
    <div class="adress-box">
      <div class="adress-top" @click="gotoAddress" v-if="data.defaultAddress != null && data.defaultAddress.id != 0">
        <div class="adress-info">
          <h4>{{ data.defaultAddress.memberName }} {{ data.defaultAddress.mobile }}</h4>
          <p>{{ data.defaultAddress.provinceName }}{{ data.defaultAddress.cityName }}{{ data.defaultAddress.address }}</p>
        </div>
        <div>
          <i class="right-arrow"></i>
        </div>
      </div>
      <div class="adress-top" @click="gotoAddress" v-if="data.defaultAddress == null || data.defaultAddress.id == 0">
        <div class="adress-info">
          <h4>请选择收货地址</h4>
        </div>
        <div>
          <i class="right-arrow"></i>
        </div>
      </div>
      <div class="line-box">
        <ul>
          <li v-for="n in 20" :key="n"></li>
        </ul>
      </div>
    </div>
    <!--商品-->
    <div class="commodity-box">
      <div class="commodity-img">
        <img v-lazy="data.productImage"/>
      </div>
      <div class="commodity-info">
        <h4>{{ data.productName }}</h4>
        <p class="commodity-info-desc">{{ data.productRemark }}</p>
        <p class="commodity-info-amount">{{ data.productPrice }}福豆</p>
      </div>
      <div class="commodity-count">
        x{{ data.productNum }}
      </div>
    </div>
    <!--金额-->
    <div class="amount-box">
      <ul>
        <li>
          <p>商品总额</p>
          <p>{{ data.orderPrice }}</p>
        </li>
        <li>
          <p>运费</p>
          <p>0</p>
        </li>
        <li>
          <p>实付金额</p>
          <p>{{ data.orderPrice }}</p>
        </li>
      </ul>
    </div>
    <!--其他信息-->
    <div class="other-box">
      <ul>
        <li>
          <p>福豆余额</p>
          <p class="status-box success">
            <span class="success"></span>
          </p>
        </li>
        <li class="other-info-remark">
          <p>备注</p>
          <p>
            <input type="text" placeholder="此处输入备注信息" v-model="remark" />
          </p>
        </li>
        <li>
          <p class="radio-box" :class="{'is-active' : radioAction}" @click="changeRadioAction">
            <span v-if="radioAction"></span>
          </p>
          <p @click="changeRadioAction">我同意</p>
          <a href="https://www.baidu.com">兑换须知</a>
        </li>
      </ul>
    </div>
    <!--底部按钮-->
    <div class="bottom-btn">
      <p>实付金额: <span>{{ data.orderPrice }}福豆</span></p>
      <button @click="submit">提交订单</button>
    </div>
    <section class="bottom-btn-placeholder"></section>
  </div>
</template>

<script>
import Header from '../components/header';
import {Indicator, MessageBox} from "mint-ui";
import request from "../utils/request";
import util from "../utils/util";

export default {
  components: {
    shopHeader: Header,
  },
  data() {
    return {
      data: {
        defaultAddress: {
          id: 0,
          mobile: "",
          memberName: "",
          address: "",
          provinceName: "",
          cityName: ""
        },
        douBalance: 0,
        orderPrice: 0,
        productNum: 0,
        productName: "",
        productImage: "",
        productRemark: "",
        productPrice: 0,
      },
      radioAction: false,
      remark: '',
    }
  },
  async created() {
    let id = this.$route.query.id;
    let num = this.$route.query.num;
    Indicator.open();
    const res = await request({productID: id, productNum: num}, "/ajax/order/orderConclude");
    if(res && res.code == 0){
      Indicator.close();
      this.data = res.data;
    }
  },
  methods: {
    submit() {
      if(!this.radioAction){
        util.toast("请点击同意兑换须知");
        return;
      }
      if(!this.data.defaultAddress || this.data.defaultAddress.id == 0){
        util.toast("请选择收货地址");
        return;
      }
      if(this.data.orderPrice > this.data.douBalance){
        util.toast("福豆余额不足,请先充值");
        return;
      }
      MessageBox.confirm('确定要提交订单吗?').then(action => {
        Indicator.open();
        request({
          productID: this.$route.query.id,
          productNum: this.data.productNum,
          addressID: this.data.defaultAddress.id,
          remark: this.remark
        }, "/ajax/order/orderAdd").then(res => {
          Indicator.close();
          if(util.warnFunc(res)) return;
          if(res.code == 0){
            util.toast("订单提交成功!");
            this.$router.push({
              path: '/user',
            });
          }
        });
      });
    },
    changeRadioAction() {
      this.radioAction = !this.radioAction;
    },
    gotoAddress() {
      this.$router.push({
        path: '/address-list',
      });
    }
  }
}
</script>

<style scoped>
p,h4,ul,li{
  margin: 0;
  padding: 0;
}
.confirm-body {
  background-color: #F7F7F7;
  position: relative;
  min-height: 100vh;
}
/*地址*/
.adress-box {
  padding-top: 10px;
  background-color: #fff;
  margin-top: 1px;
}
.adress-box > .adress-top {
  display: flex;
  padding: 0 15px;
  align-items: center;
}
.adress-box > .adress-top > .adress-info {
  flex: 1;
  text-align: left;
}
.adress-box > .adress-top > .adress-info > p {
  margin-top: 10px;
  color: #282828;
}
.adress-box > .adress-top >div > .right-arrow{
  border: solid 2px #999;
  border-bottom-width: 0;
  border-left-width: 0;
  display: block;
  width: 8px;
  height: 8px;
  margin-top: 10px;
  margin-left: 15px;
  margin-right: 3px;
  -webkit-transform: translateY(-50%) rotate(45deg);
  transform: translateY(-50%) rotate(45deg);
}
.line-box {
  padding: 0;
  margin-top: 10px;
}
.line-box > ul {
  display: flex;
}
.line-box > ul > li {
  list-style: none;
  display: block;
  flex: 1;
  height: 2px;
  margin-left: 4px;
}
.line-box > ul > li:first-child {
  margin-left: 0;
}
.line-box > ul > li:nth-of-type(odd) {
  background-color: #4B82F9;
}
.line-box > ul > li:nth-of-type(even) {
  background-color: #DB7A77;
}

/*商品*/
.commodity-box {
  display: flex;
  padding: 10px 15px;
  margin-top: 15px;
  background-color: #fff;
  border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
}
.commodity-img {
  width: 25%;
}
.commodity-img > img {
  width: 100%;
}
.commodity-info {
  flex: 1;
  text-align: left;
  margin-left: 10px;
  font-size: 14px;
}
.commodity-info > h4 ~ p {
  margin-top: 3px;
}
.commodity-info-desc {
  font-size: 12px;
  color: #969696;
}
.commodity-info-amount {
  color: #EB544D;
}
.commodity-count {
  padding-top: 1px;
}

/*金额*/
.amount-box {
  padding-left: 15px;
  border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
  margin-top: 15px;
  background-color: #fff;
}
.amount-box > ul > li {
  list-style: none;
  border-bottom: 1px solid #EAEAEA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px 15px 10px 0;
}
.amount-box > ul > li > p:last-child {
  color: #EB544D;
}
.amount-box > ul > li:last-child {
  font-weight: bold;
  border-bottom: 0;
}

/*其他信息*/
.other-box {
  padding-left: 15px;
  border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
  margin-top: 15px;
  background-color: #fff;
}
.other-box > ul > li {
  list-style: none;
  border-bottom: 1px solid #EAEAEA;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px 15px 10px 0;
}
.other-box > ul > li > .status-box {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.other-box > ul > li > .success {
  background-color: #49C327;
}
.other-box > ul > li > .error {
  background-color: red;
}
.other-box > ul > li > .status-box > .success{
  display: inline-block;
  margin-top: -5px;
  width: 6px;
  height: 10px;
  transform: rotate(45deg);
  border-style: solid;
  border-color: #FFF;
  border-width: 0 2px 2px 0;
}
.other-box > ul > li > .status-box > .error{
  width: 15px;
  height: 15px;
  margin: auto;
  position: relative;
  margin-left: 32px;
}
.other-box > ul > li > .status-box > .error::before,
.other-box > ul > li > .status-box > .error::after {
  content: "";
  position: absolute;
  height: 12px;
  width: 2px;
  top: 1px;
  right: 15px;
  background-color: #fff;
}
.other-box > ul > li > .status-box > .error::before {
  transform: rotate(45deg);
}
.other-box > ul > li > .status-box > .error::after {
  transform: rotate(-45deg);
}
.other-box > ul > li > p:last-child {
  color: #EB544D;
}
.other-box > ul > li:last-child {
  font-weight: bold;
  border-bottom: 0;
  justify-content: flex-start;
}
.other-box > ul > li:last-child > p {
  margin-right: 10px;
}
.other-box > ul > li > .radio-box.is-active {
  border-color: #49C327;
}
.other-box > ul > li > .radio-box {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.other-box > ul > li > .radio-box > span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #49C327;
}
.other-box > ul > li.other-info-remark > p:last-child {
  flex: 1;
  margin-left: 50px;
}
.other-box > ul > li.other-info-remark > p:last-child > input {
  width: 100%;
  border: 0;
  outline: none;
  line-height: 16px;
}

/*底部按钮*/
.bottom-btn {
  width: 100%;
  height: 40px;
  position: fixed;
  left: 0;
  bottom: 0;
  border-top: 1px solid #EAEAEA;
  /* border-top: 1px solid #EAEAEA;
  border-bottom: 1px solid #EAEAEA;
  background-color: #fff; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #fff;
}
.bottom-btn > p {
  margin-right: 15px;
}
.bottom-btn > p > span {
  color: #EB544D;
}
.bottom-btn > button {
  padding: 0 15px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: #EB544D;
  border: 0;
  color: #fff;
}
.bottom-btn-placeholder {
  width: 100%;
  height: 40px;
}
</style>
